<template>
    <div class="applyMessagesCode">
        <h3>验证</h3>
        <el-form label-width="120px" :model="codeInfo">
            <el-form-item label="手机号码：" required class="form-item-po" prop="phone">
                <span>{{codeInfo.phone}}</span>
            </el-form-item>
            <el-form-item label="图形验证码：" required class="form-item-po" prop="imageCode">
                <el-input v-model="codeInfo.imageCode">
                    <template slot="append">
                        <img :src="'data:image/png;base64,' + imageCodeSrc" alt="获取图片验证码" @click="getImageCode()">
                    </template>
                </el-input>
            </el-form-item>
            <!--<el-form-item label="短信验证码：" required class="form-item-po" prop="code">-->
                <!--<el-input v-model="codeInfo.code">-->
                    <!--<template slot="append">-->
                        <!--<el-button v-if="sendMsgDisabled" :disabled="true">{{time+'秒后获取'}}</el-button>-->
                        <!--<el-button v-else-if="!sendMsgDisabled" @click="sendSmsData()">获取短信验证码</el-button>-->
                    <!--</template>-->
                <!--</el-input>-->
            <!--</el-form-item>-->
            <el-form-item class="btn-box">
                <el-button @click="back()">上一步</el-button>
                <el-button type="primary" @click="sendSmsData()">发 送</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
    import { sendSms, imageCode, verifyCode } from "@/api/api";
    export default {
        name: "applyMessagesCode",
        data () {
            return {
                time: 60, // 发送验证码倒计时
                sendMsgDisabled: false,
                imageCodeSrc: "",
                codeInfo: {
                    "phone": this.$route.query.phone,
                    "imageCode": ""
                }
            };
        },
        watch: {
            $route: function (to) {
                if(to.name === "applyMessagesCode"){
                    this.sendMsgDisabled = false;
                    this.time = 60;
                    this.imageCodeSrc = "";
                    this.codeInfo.imageCode = "";
                    this.codeInfo.phone = this.$route.query.phone;
                    this.getImageCode();
                }
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.getImageCode();
            });
        },
        methods: {
            // 上一步；
            back () {
                this.$router.go(-1);
            },
            // 倒计时；
            sendTime () {
                let _this = this;
                _this.sendMsgDisabled = true;
                let interval = window.setInterval(function() {
                    if ((_this.time--) <= 0) {
                        _this.time = 60;
                        _this.sendMsgDisabled = false;
                        window.clearInterval(interval);
                    }
                }, 1000);
            },
            // 获取图片验证码;
            async getImageCode () {
                let _this = this;
                await imageCode({}).then((res) => {
                    if(res.data.state.code === "200") {
                        _this.imageCodeSrc = res.data.ciphertext;
                    }
                });
            },
            // 发送；
            async sendSmsData () {
                let _this = this;
                if (this.codeInfo.phone === "") {
                    this.$message.error('手机号码不能为空！');
                    return false;
                } else if (this.codeInfo.imageCode === "") {
                    this.$message.error('请输入图形验证码！');
                    return false;
                }
                await sendSms(this.codeInfo).then((res) => {
                    if(res.data.state.code === "200") {
                        _this.$message({
                            message: "发送成功",
                            type: 'success'
                        });
                        _this.$router.push({path: '/applyOpenAccount', query: {loanNo: _this.$route.query.loanNo}});
                    };
                });
            },
            // 验证短信验证码
            async verifyCodeData () {
                let _this = this;
                if (this.codeInfo.phone === "") {
                    this.$message.error('手机号码不能为空！');
                    return false;
                } else if (this.codeInfo.code === "") {
                    this.$message.error('验证码不能为空！');
                    return false;
                }
                await verifyCode(this.codeInfo).then((res) => {
                    if(res.data.state.code === "200") {
                        _this.$message({
                            message: "成功",
                            type: 'success'
                        });
                        _this.$router.push({path: '/applyOpenAccount', query: {loanNo: _this.$route.query.loanNo}});
                    } else {
                        _this.$message({
                            message: res.data.state.message,
                            type: 'error'
                        });
                    }
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    .applyMessagesCode{
        width: 400px;
        margin: 40px auto;
        h3{
            text-align: center;
            margin: 30px 0 50px;
            font-size:16px;
        }
        .el-form{
            .el-form-item{
                margin: 20px 10px;
                img{
                    width: 100px;
                    height: 29.64px;
                    display: inline-block;
                    text-align: center;
                    line-height:29.64px;
                    cursor: pointer;
                }
            }
            .btn-box{
                margin-top:50px;
            }
        }
    }
</style>
